<template>
 <el-dialog title="导入" :close-on-click-modal="false"  :visible.sync="show" class="dialog_import" :before-close="cancle">
    <el-form>
      <el-form-item label="模版下载：" >
        <a :href="fileModuleUrl" target="_blank">
          <el-button type="search">模板下载</el-button>
        </a>
      </el-form-item>
      <el-form-item label="模板导入：" >
        <el-input v-model="filename"></el-input>
        <div class="uploadEXcel">
          <input type="file" id="input" accept=".xls,.xlsx " :multiple="false" @change="changeFile" />
          <el-button slot="trigger"  type="search">模板导入</el-button>
        </div>
        <!-- <el-upload  :action="actionUrl"  class="uploadEXcel"
        :on-success="(response) => handleSuccess(response)"
          :on-error="handleError" :before-upload="beforeUpload"
        :show-file-list="false" accept=".xls,.xlsx "  >
          <el-button slot="trigger"  type="search">模板导入</el-button>
        </el-upload> -->
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="search" @click="submitForm">确定</el-button>
      <el-button @click="cancle">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { importData } from '@/api/product/instructions.js'

export default {
  props: {
    show: Boolean,
    closeDialog:Function,
    idList: Array
  },
  data() {
    return {
      file: '',
      filename: '',
      actionUrl: '/api/api/instructions/import',
      fileModuleUrl: '/api/api/download/%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF-%E8%AF%B4%E6%98%8E%E4%B9%A6%E7%AE%A1%E7%90%86.xlsx'
    }
  },
  mounted () {


  },
  methods: {
    changeFile(event){
      var fileList = event.target.files[0]; // (利用console.log输出看file文件对象)
      if(fileList) {
        this.filename = fileList.name
        this.file = fileList
      } else {
        this.$message.error('文件上传失败')  
      }
      document.getElementById("input").value='';

    },
    // beforeUpload(file) {
    //   // if(file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/jpg'){
    //   //   this.$message.error("仅支持.jpg/.jpeg/png格式的图片")
    //   //   return false
    //   // }
    //   console.log(file)
    // },
    // handleError() {
    //   this.$message.error('上传文件失败')  
    // },
    // handleSuccess (response) {
    //   console.log(response)
    // },
    cancle() {
      this.$emit('closeDialog', false)
      this.filename = ''
    },
    submitForm(){
      let params = new FormData()
      params.append('file', this.file)
      importData(params).then(res=>{
        let data =res.data
        if(data.state == 1){
           this.$message.success('导入成功')   
          this.$emit('closeDialog', true)
        } else if(data.state == 0) {
          this.$message.error(data.message)   
        }
      })
    },
  }
}
</script>

<style lang="scss">
.dialog_del{
  .el-radio{
    color: #666666;
    margin-top: 19px;
  }
  .el-radio__inner{
    width: 16px;
    height: 16px;
  }
}

</style>